<template>
	<view class="pages">
		<scroll-view scroll-y="true" class="contentbox" @scrolltolower="scrolltolower">
			<u-swiper @click="click" :list="list" keyName="image" height="180" radius="0" :indicator="true" indicatorMode="dot"></u-swiper>
			
			<view class="contents">
				<div class="contbox">
					<view class="b1" @click="gobox(1)">
						<image src="../../static/index/b1.png" mode=""></image>
						<view>企业文化</view>
					</view>
					<view class="b1" @click="gobox(2)">
						<image src="../../static/index/b2.png" mode=""></image>
						<view>公司新闻</view>
					</view>
					<view class="b1" @click="gobox(3)">
						<image src="../../static/index/b3.png" mode=""></image>
						<view>产品介绍</view>
					</view>
					<view class="b1" @click="gobox(4)">
						<image src="../../static/index/b4.png" mode=""></image>
						<view>服务网点</view>
					</view>
					<view class="b1" @click="gobox(5)">
						<image src="../../static/index/b5.png" mode=""></image>
						<view>商城</view>
					</view>
					<view class="b1" @click="gobox(6)">
						<image src="../../static/index/b6.png" mode=""></image>
						<view>用户咨询</view>
					</view>
				</div>
			</view>
			
			<view class="news">
				<view class="uniBtn name">
					<view>公司新闻</view>
					<view @click="more">更多...</view>
				</view>

				<view class="uniFlex newbox" v-for="(item, index) in list2" :key="index" @click="detail(item.id)">
					<img :src="item.image" alt="" />
					<view class="newmsg">
						<view>{{item.title}}</view>
						<view>{{item.typestr}}</view>
						<view>{{item.author}}</view>
						<view>{{item.create_time}}</view>
					</view>
				</view>
			</view>
			<view class="news">
				<view class="uniBtn name">
					<view>公司荣誉</view>
				</view>

				<view class="newbox">
					<view class="boxes" v-for="(item, index) in list3" :key="index">
						<img @click="previewImage(item.image)" :src="item.image" alt="" />
						<view>{{item.title}}</view>
						<view>{{item.date}}</view>
					</view>
					<!-- <view class="boxes">
						<img src="https://z1.ax1x.com/2023/11/15/piYcx8x.png" alt="" />
						<view>李晓晓</view>
						<view>2023.11.08 15:32:45</view>
					</view>
					<view class="boxes">
						<img src="https://z1.ax1x.com/2023/11/15/piYcx8x.png" alt="" />
						<view>李晓晓</view>
						<view>2023.11.08 15:32:45</view>
					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// }
			],
			list2: [],
			list3: [],
		};
	},
	onLoad() {},
	methods: {
		async getData() {
			this.$forceUpdate(); //强制组件更新
			await this.index();
		},
		async index() {
			let res = await this.$api.index();
			if (res.code == 1) {
				this.list = res.data.lunbo;
				this.list2 = res.data.article;
				this.list3 = res.data.rongyu;
			}
		},
		more() {
			uni.navigateTo({
				url: '/pages/index/news/news'
			});
		},
		// 详情
		detail(id) {
			uni.navigateTo({
				url: '/pages/index/detail/detail?id=' + id
			});
		},
		scrolltolower() {
			console.log('触底');
		},
		// 预览
		previewImage: function (img) {
			let imgs = [];
			imgs.push(img);
			uni.previewImage({
				current: 0, //预览图片的下标
				urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			});
		},
		// 轮播图
		click(e){
			console.log(e)
			if(this.list[e].url){
				// console.log(this.list[e].url)
				let url = this.list[e].url;
				uni.navigateTo({
					url:'/pages/index/webview?url='+url
				})
			}else{
				uni.navigateTo({
					url: '/pages/index/detail/detail?id=' + this.list[e].nid
				});
			}
		},
		// 模块
		gobox(num){
			if(num==1){
				uni.navigateTo({
					url:'/pages/index/honor/honor'
				})
			}else if(num==2){
				uni.navigateTo({
					url:'/pages/index/news/news'
				})
			}else if(num==3){
				uni.navigateTo({
					url:'/pages/index/product/product'
				})
			}else if(num==4){
				uni.setStorageSync('tabtype', 2);
				uni.redirectTo({
					url:'/pages/home/home'
				})
			}else if(num==5){
				uni.navigateToMiniProgram({
					appId: 'wx73134870990c81b9',
					success(res) {
						// 打开成功
					}
				})
			}else if(num==6){
				uni.navigateTo({
					url:'/pages/mains/feedback/feedback'
				})
			}
			
		}
	}
};
</script>

<style scoped lang="scss">
.pages {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.contentbox {
	flex: 1;
	overflow: hidden;
	padding-bottom: 170rpx;
	.contents{
		margin: 20rpx 13rpx 22rpx 13rpx;
		background: #fff;
		padding: 20rpx 0;
		border-radius: 10rpx;
		.contbox{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			
			.b1{
				width: 31%;
				margin: 30rpx 1%;
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
	.news {
		margin: 20rpx 13rpx 22rpx 13rpx;
		background: #fff;
		padding: 28rpx 22rpx;
		border-radius: 10rpx;

		.name {
			view:first-child {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;

				background: linear-gradient(180deg, #00a3f6 0%, #0e6ab2 74.072265625%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			view:last-child {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #008aff;
			}
		}
		.newbox {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			
			img {
				width: 240rpx;
				height: 180rpx;
				margin-right: 30rpx;
			}
			.newmsg {
				width: 360rpx;
				view:nth-child(1) {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #000000;
					line-height: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				view:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					line-height: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 10rpx 0;
				}
				view:nth-child(3) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					line-height: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 10rpx;
				}
				view:nth-child(4) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #878787;
				}
			}
			.boxes {
				width: 320rpx;
				margin-bottom: 20rpx;
				margin-right: 40rpx;
				&:nth-child(2n) {
					margin-right: 0rpx;
				}
				img {
					width: 320rpx;
					height: 330rpx;
				}
				view {
					padding-left: 20rpx;
				}
				view:first-child {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #000000;
					line-height: 36rpx;
				}
				view:last-child {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #878787;
					line-height: 36rpx;
				}
			}
		}
	}
}
</style>
